<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <p>firstName：{{ firstName }}</p>
    <p>lastName：{{ lastName }}</p>
    <user-name
      v-model:first-name="firstName"
      v-model:last-name="lastName"
    />
  </div>

  <script>
    const app = Vue.createApp({
      setup() {
        const firstName = Vue.ref('Du')
        const lastName = Vue.ref('Li')
        return { firstName, lastName }
      }
    })

    app.component('user-name', {
      props: {
        firstName: String,
        lastName: String
      },
      template: `
      <input
      type="text"
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)">
      <br />
      <input
      type="text"
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)"
      `
    })

    app.mount('#app')
  </script>
</body>
</html>